<template>
	<view class="evaluation">
		<image v-if="data.typeId != '16' && data.typeId != '17' && data.typeId != '23' && data.typeId != '25' && data.typeId != '26'"
			class="result" :src="data.ShareImgUrl" mode="widthFix" />
		<view v-if="data.typeId == '16'" style="position: relative;">
			<image class="result" src="http://fcdn.qiushilaile.com/game/default-68401629808232491.jpg" mode="widthFix"></image>
			<view class="txt1">{{data.answerRes}}</view>
			<view class="txt2">{{data.Title}}</view>
			<view class="txt3">{{data.Descrption}}</view>
		</view>
		<view v-if="data.typeId == '17'" style="position: relative;">
			<image class="result" src="http://fcdn.qiushilaile.com/game/default-51731631592991701.jpg" mode="widthFix"></image>
			<image class="onTop" src="http://fcdn.qiushilaile.com/game/default-61511631593218695.png"></image>
			<image class="infoImg1 txt" :src="data.avatarUrl"></image>
			<image class="infoImg2 txt" :src="personInfo.touxiang"></image>
			<view class="name txt">{{personInfo.xingming}}</view>
			<view class="infoTxt1 txt">{{personInfo.aihao}}</view>
			<view class="infoTxt2 txt">*你们都在{{personInfo.date}}这天出生哦~</view>
			<view class="infoTxt3 txt">{{personInfo.diqu}}</view>
			<view class="infoTxt5 txt">{{personInfo.xingge}}</view>
			<view class="infoTxt6 txt">{{personInfo.xingming}}</view>
			<view class="infoTxt7 txt">{{personInfo.zhishu}}</view>
			<view class="infoTxt8 txt">{{personInfo.zhiye}}</view>
		</view>
		<view v-if="data.typeId == '23'" style="position: relative;">
			<image class="result" src="http://fcdn.qiushilaile.com/game/default-40701634109884320.jpg" mode="widthFix" />
			<view class="txt23_1">{{data.p1}}</view>
			<view class="txt23_2">{{data.p2}}</view>
			<view class="txt23_3">{{data.p3}}</view>
			<view class="txt23_4">{{data.p4}}</view>
			<view class="txt23_5">{{data.p5}}</view>
		</view>
		<view v-if="data.typeId == '25'" style="position: relative;">
			<image class="result" :src="data.ShareImgUrl" mode="widthFix" />
			<view class="video">
				<progress :percent="progress" />
				<video
					id="myVideo"
					style="width: 630rpx; height: 424rpx;"
					:src="data.ShareImgUrl2"
				/>
			</view>
			<view class="saveVideo" @click="saveVideo">
				<image src="http://fcdn.qiushilaile.com/game/default-4831634546829893.png" />
			</view>
		</view>
		<view v-if="data.typeId == '26'" style="position: relative;">
			<image class="result" src="http://fcdn.qiushilaile.com/game/default-27141634696118074.jpg" mode="widthFix" />
			<view class="txtWorld_txt1 txtWorld">{{personInfo.shengxiao}}</view>
			<view class="txtWorld_txt2 txtWorld">{{personInfo.tianshu}}天</view>
			<view class="txtWorld_txt3 txtWorld">{{personInfo.tianshu2}}天</view>
			<view class="txtWorld_txt4 txtWorld">{{personInfo.zhousui}}</view>
			<view class="txtWorld_txt5 txtWorld">{{personInfo.lianrenList[0]}}</view>
			<view class="txtWorld_txt6 txtWorld">{{personInfo.lianrenList[1]}}</view>
			<view class="txtWorld_txt7 txtWorld">{{personInfo.lianrenList[2]}}</view>
			<view class="txtWorld_txt8 txtWorld">{{personInfo.lianrenList[3]}}</view>
		</view>
		<!-- <view class="game-btns">
			<navigator class="btn" open-type="reLaunch" url="/pages/index/index">更多好玩</navigator>
			<navigator class="btn" open-type="navigateBack">再测一次</navigator>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: ['data', 'personInfo'],
		data() {
			return {
				params: { // 图片参数
					gameBg: 'https://file.91daihuo.cn/7c000f1438bf4058ab1fbf966a54a1cb.png',
					gameContent: require('static/img/game_content.png')
				},
				progress: 0,
			}
		},
		methods: {
			downloadImage() {
				let task = tt.downloadFile({
					url: this.data.ShareImgUrl2,
					success: (res) => {
						if (res.statusCode === 200) {
							// 下载的图片存到本地的地址
							// console.log("下载成功", res.tempFilePath);
							tt.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success(res) {
									tt.showToast({
										title: '保存成功'
									});
								},
								fail(err) {
									// console.log(err);
									tt.showToast({
										title: '保存失败'
									});
								}
							});
						}
					},
					fail: (res) => {
						// console.log("下载失败", res.errMsg);
					},
				});
				task.onProgressUpdate((res) => {
					// 更新下载的进度
					this.progress = res.progress
				});
			},
			saveVideo() {
				this.downloadImage();
				console.log(this.data.ShareImgUrl2);
			},
			more() {
				uni.reLaunch("/pages/index/index")
			},
			again() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.txtWorld {
		position: absolute;
		letter-spacing: 3px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
	}
	.txtWorld_txt1 {
		top: 28.5%;
		left: 55%;
		font-weight: 500;
	}
	.txtWorld_txt2 {
		top: 13%;
		left: 65%;
		color: #FFD884;
	}
	.txtWorld_txt3 {
		top: 18%;
		left: 65%;
		color: #FFD884;
	}
	.txtWorld_txt4 {
		top: 35.5%;
		left: 58%;
		font-weight: 500;
	}
	.txtWorld_txt5 {
		top: 51%;
		left: 24.5%;
		font-size: 16px;
		font-weight: 500;
	}
	.txtWorld_txt6 {
		top: 51%;
		left: 57%;
		font-size: 16px;
		font-weight: 500;
	}.txtWorld_txt7 {
		top: 57.5%;
		left: 25%;
		font-size: 16px;
		font-weight: 500;
	}.txtWorld_txt8 {
		top: 57.5%;
		left: 57%;
		font-size: 16px;
		font-weight: 500;
	}
	.video {
		width: 630rpx;
		height: 424rpx;
		background-color: #fff;
		position: absolute;
    top: 68%;
    left: 50%;
    transform: translate(-50%, -50%);
	}
	.saveVideo {
		width: 447rpx;
		height: 105rpx;
		position: absolute;
		bottom: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
		// z-index: 9;
	}
	.saveVideo image {
		width: 100%;
		height: 100%;
		display: block;
	}
	.txt23_1 {
    position: absolute;
    top: 21.8%;
    left: 56.7%;
		width: 90px;
    height: 90px;
		line-height: 90px;
    text-align: center;
    font-size: 56px;
		color: #5177C1;
	}
	.txt23_2 {
		position: absolute;
    top: 36.5%;
    left: 50%;
		// width: 190px;
    text-align: center;
		color: #5F3D17;
		font-weight: bold;
	}
	.txt23_3 {
		position: absolute;
    top: 41.4%;
    left: 50%;
		// width: 190px;
    text-align: center;
		color: #5F3D17;
		font-weight: bold;
	}
	.txt23_4 {
		position: absolute;
    top: 46.3%;
    left: 50%;
		// width: 190px;
    text-align: center;
		color: #5F3D17;
		font-weight: bold;
	}
	.txt23_5 {
		position: absolute;
    top: 63%;
    left: 17%;
		letter-spacing: 2px;
		width: 265px;
		height: 230px;
		overflow: scroll;
		color: #5177C1;
		font-weight: bold;
	}
	.infoTxt3 {
		top: 75.5%;
    left: 50%;
	}
	.infoTxt5 {
		top: 66%;
    left: 50%;
	}
	.infoTxt6 {
		top: 52.2%;
    left: 50%;
	}
	.infoTxt7 {
		top: 70.9%;
    left: 50%;
	}
	.infoTxt8 {
		top: 56.9%;
    left: 50%;
	}
	.txt {
		position: absolute;
		letter-spacing: 3px;
    font-size: 14px;
    font-weight: bold;
    color: #000;
	}
	.onTop {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		position: absolute;
		top: 25%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9;
	}
	.infoImg1 {
		width: 200rpx;
    height: 200rpx;
    border-radius: 100rpx;
		top: 18.6%;
    left: 18.9%;
		// letter-spacing: 3px;
	}
	.infoImg2 {
		width: 200rpx;
    height: 200rpx;
    border-radius: 100rpx;
		top: 18.6%;
    left: 54.6%;
		// letter-spacing: 3px;
	}
	.name {
		top: 32.9%;
    left: 54%;
		font-weight: bolder;
    font-size: 46rpx;
    color: #000;
    letter-spacing: 2px;
	}
	.infoTxt1 {
		top: 61.5%;
    left: 50%;
		// letter-spacing: 3px;
	}
	.infoTxt2 {
		width: 100%;
		text-align: center;
		font-weight: 500;
		color: #969696;
		position: absolute;
		top: 38.7%;
		left: 50%;
		transform: translate(-50%, -50%);
		letter-spacing: 2px;
	}
	.txt1 {
    position: absolute;
    top: 21.3%;
    left: 8%;
		width: 90px;
    height: 90px;
		line-height: 90px;
    text-align: center;
    font-size: 56px;
		color: red;
	}
	.txt2 {
    position: absolute;
    top: 28.2%;
    left: 42%;
		color: white;
		width: 190px;
    text-align: center;
	}
	.txt3 {
    position: absolute;
    top: 48%;
    left: 17%;
		letter-spacing: 3px;
		width: 265px;
		height: 230px;
		overflow: scroll;
	}
	.evaluation {
		position: relative;
		background-color: rgba($color: #000000, $alpha: .6);
		width: 100%;
		// height: 100vh;
	}
	.result {
		width: 100vw;
		height: 100vh;
		display: block;
	}
	.game-btns {
		position: absolute;
		width: 100%;
		bottom: 78rpx;
		left: 0;
		display: flex;
		justify-content: space-around;
		padding: 0 40rpx;
		
		.btn {
			text-align: center;
			width: 212rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #3f0aa9;
			border-radius: 16rpx;
			overflow: hidden;
			color: #FFFFFF;
			font-size: 34rpx;
		}
	}
</style>
